<template>
  <div style="width: 100%; height: 100%">
    <Header title="缺陷单位分布" />
    <div class="content">
      <div id="model2" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>
<script>
import { defectUnitDistribute } from '@/api/cms/index/index.js'
import Header from './header.vue'
import echarts from 'echarts'
export default {
  components: {
    Header
  },
  props: {
    deptCode: {
      type: String,
      default: ''
    },
    railTypes: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      data: []
    }
  },
  watch: {
    railTypes(ov) {
      this.init()
    }
  },
  mounted() {
    this.init()
    const that = this
    window.addEventListener('resize', function() {
      that.$nextTick((_) => {
        const myChart1 = echarts.init(document.getElementById('model2'))
        myChart1.resize()
      })
    })
  },
  methods: {
    init() {
      const deptNameList = []
      const dealedNumList = []
      const rateList = []
      const unDealedNumList = []

      defectUnitDistribute({}).then((res) => {
        this.data = res.data
        res.data.forEach((item) => {
          deptNameList.push(item.deptName)
          dealedNumList.push(item.dealedNum)
          rateList.push(Number(item.rate))
          unDealedNumList.push(item.unDealedNum)
        })

        this.showEcharts(
          deptNameList,
          dealedNumList,
          rateList,
          unDealedNumList,
          Math.max(...rateList)
        )
      })
    },
    showEcharts(
      deptNameList,
      dealedNumList,
      rateList,
      unDealedNumList,
      maxRate
    ) {
      const that = this
      const myChart1 = echarts.init(document.getElementById('model2'))
      const option1 = {
        color: ['#129BFF', '#1254FF', '#00A77F'],
        tooltip: {
          trigger: 'axis',

          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#CCE7FF'
            }
          },
          formatter: function(params) {
            var relVal = params[0].name
            for (var i = 0, l = params.length; i < l; i++) {
              if (params[i].seriesName === '销号率') {
                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value + '%'
              } else {
                relVal += '<br/>' + params[i].marker + params[i].seriesName + ' : ' + params[i].value
              }
            }
            return relVal
          }
        },

        legend: {
          data: ['未销号', '已销号', '销号率'],
          textStyle: {
            color: '#CCE7FF'
          }
        },
        xAxis: [
          {
            splitLine: { show: false },
            boundaryGap: true,
            type: 'category',
            data: deptNameList,

            axisLine: {
              show: true, // Y轴线
              lineStyle: {
                type: 'solid',
                color: '#39456A'
              }
            },
            alignWithLabel: true,
            axisLabel: {
              interval: 0,
              rotate: 20,
              formatter: '{value}',
              color: '#CCE7FF' // 刻度线标签颜色
            }
          }
        ],
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        yAxis: [
          {
            splitLine: { show: false },
            type: 'value',
            name: '',

            axisLabel: {
              formatter: '{value}',
              color: '#CCE7FF' // 刻度线标签颜色
            },
            axisLine: {
              show: true, // Y轴线
              lineStyle: {
                type: 'solid',
                color: '#39456A'
              }
            }
          },
          {
            splitLine: { show: false },
            type: 'value',
            name: '',

            axisLabel: {
              formatter: '{value} %',
              interval: 0
            },
            axisLine: {
              lineStyle: {
                color: '#CCE7FF',
                width: 1 // 这里是为了突出显示加上的
              }
            }
          }
        ],
        series: [
          {
            name: '未销号',
            type: 'bar',
            data: unDealedNumList,
            barWidth: 12
          },
          {
            name: '已销号',
            type: 'bar',
            data: dealedNumList,
            barWidth: 12
          },
          {
            name: '销号率',
            type: 'line',
            yAxisIndex: 1,
            data: rateList,
            itemStyle: {
              normal: {
                areaStyle: {
                  type: 'default',
                  // 渐变色实现===
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    // 三种由深及浅的颜色
                    [
                      {
                        offset: 0,
                        color: 'rgba(102, 255, 255, 0.17)'
                      },
                      {
                        offset: 1,
                        color: 'rgba(102, 255, 255, 0.17)'
                      }
                    ]
                  )
                },
                lineStyle: {
                  // 线的颜色
                  color: '#66FFDA'
                },
                // 以及在折线图每个日期点顶端显示数字
                label: {
                  show: true,
                  position: 'top',
                  textStyle: {
                    color: 'white'
                  },
                  'formatter': function(a) {
                    return a.value.toLocaleString() + '%'
                  }
                }
              }
            }
          }
        ]
      }
      myChart1.on('click', function(params) {
        let deptCode = ''
        that.data.forEach(r => {
          if (params.name === r.deptName) {
            deptCode = r.deptCode
          }
        })
        that.$emit('module1Click', { moduleType: 'module2', title: '缺陷单位分布详情', type: deptCode })
      })
      myChart1.setOption(option1)
    }
  }
}
</script>
<style lang="scss" scoped>
.num {
  font-family: YouSheBiaoTiHei;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  color: #3e9cff;
}
.name {
  font-family: YouSheBiaoTiHei;
  font-style: normal;
  font-weight: normal;
  font-size: 18px;
  line-height: 23px;
}
.content {
  width: 100%;
  height: calc(100% - 70px);
}
</style>
